<template>
	<view class="content">
		<vr-banner :bannerList="roomInfo.picUrls" :roomName="roomInfo.roomHouseName"></vr-banner>
		<view class="roomInfo">
			<view class="infoBox flex">
				<view class="name">{{roomInfo.roomHouseName}}</view>
				<view class="num">可住人数{{roomInfo.peopleNum}}人</view>
			</view>
			<view class="areaBox flex">
				<view class="type">
					<text v-if="roomInfo.isWhole">整租:</text>
					<text v-else>合租{{`/${roomInfo.roomType}`}}:</text>
					{{roomInfo.roomHouseTypeName}}
				</view>
				<view class="area">朝向:<text class="txt">{{roomInfo.toward}}</text></view>
				<view class="area">面积:<text class="txt">{{roomInfo.space}}㎡</text></view>
			</view>
			<view class="service row">
				<view class="tabbox">
					<text class="tab" v-for="(tag,i) in roomInfo.tags" :key="'tag'+i">{{tag}}</text>
				</view>
				<view class="price"><text class="yellow">{{roomInfo.price}}</text>元/月</view>
			</view>
		</view>
		<view class="address">
			<uni-list>
			    <uni-list-item :title="roomInfo.address" :thumb="$imgUrl + '/icon/addr.png'" thumb-size="sm" link @click="$Foundation.toMapAPP(roomInfo.lat,roomInfo.lon,roomInfo.address)"></uni-list-item>
			</uni-list>
		</view>
		<view class="mainBox" v-if="roomInfo.roomsFacilities&&roomInfo.roomsFacilities.length">
			<view class="installationBox">
				<view class="mainTit">房间配置</view>
				<public-facilities :facilitiesList="roomInfo.roomsFacilities"></public-facilities>
			</view>
		</view>
		<view class="checkBox" v-if="roomInfo.checkCode">
			<view class="tit">此核验码经上海市房产局核验通过</view>
			<view class="txt">核验码:{{roomInfo.checkCode}}</view>
		</view>
		<view class="roomTypeBox" v-if="!roomInfo.isWhole">
			<view class="mainTit">其他房间</view>
			<view class="typeList" v-if="otherRooms.length">
				<u-scroll-list :indicator="false">
					<view class="list" v-for="(item,i) in otherRooms" :key="i" @click="goHouseDetail(item.roomHouseId)">
						<view class="pic">
							<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item.picUrl)"></image>
							<view class="full" v-if="item.isFullRoom">已租</view>
						</view>
						<view class="roomMess">
							<view class="name">{{item.roomFullName}}</view>
							<view class="tabbox">
								<view class="area">{{item.roomHouseTypeName}} | {{item.space}}㎡</view>
								<view class="price">
									<text class="yellow">{{item.price}}</text>元/月起
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="emptyBox" v-else>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/empty.png'" mode=""></image>
				</view>
				<view class="txt">暂无相关数据哦~</view>
			</view>
		</view>
		<view class="roomTypeBox">
			<view class="mainTit">同小区房源</view>
			<view class="typeList" v-if="sameRsdtRooms.length">
				<u-scroll-list :indicator="false">
					<view class="list" v-for="(item,i) in sameRsdtRooms" :key="i" @click="goHouseDetail(item.roomHouseId)">
						<view class="pic">
							<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item.picUrl)"></image>
							<view class="full" v-if="item.isFullRoom">满房</view>
						</view>
						<view class="roomMess">
							<view class="name">{{item.roomFullName}}</view>
							<view class="tabbox">
								<view class="area">
									{{item.isWhole?'整租':'合租'}} {{item.roomHouseTypeName}} | {{item.space}}㎡
								</view>
								<view class="price">
									<text class="yellow">{{item.price}}</text>元/月起
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="emptyBox" v-else>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/empty.png'" mode=""></image>
				</view>
				<view class="txt">暂无相关数据哦~</view>
			</view>
		</view>
		<view class="roomTypeBox">
			<view class="mainTit">推荐附近房源</view>
			<view class="typeList" v-if="nearRooms.length">
				<u-scroll-list :indicator="false">
					<view class="list" v-for="(item,i) in nearRooms" :key="i" @click="goHouseDetail(item.roomHouseId)">
						<view class="pic">
							<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item.picUrl)"></image>
							<view class="full" v-if="item.isFullRoom">满房</view>
						</view>
						<view class="roomMess">
							<view class="name">{{item.roomFullName}}</view>
							<view class="tabbox">
								<view class="area">{{item.roomHouseTypeName}} | {{item.space}}㎡</view>
								<view class="price">
									<text class="yellow">{{item.price}}</text>元/月起
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="emptyBox" v-else>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/empty.png'" mode=""></image>
				</view>
				<view class="txt">暂无相关数据哦~</view>
			</view>
		</view>
		<view class="btnBox row">
			<button class="phone" @click="$Foundation.call(roomInfo.storeTel)">拨打电话</button>
			<button class="look" type="primary" @click="appointment">预约看房</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getRoomHouseInfo,sameResidentialListings,otherRoomsInTheSameListing,recommendListingsNear } from '@/common/API/room'
import { getDictData } from '@/common/API/system'
import publicFacilities from '@/components/publicFacilities'
import vrBanner from '@/components/vrBanner'

const roomHouseId = ref()
const roomInfo = ref({})

onLoad((options)=> {
	roomHouseId.value = options.roomHouseId;
	getPublicFac()
	getHouseDetail()
	getSameResidentialRooms()
	getNearbyRooms()
})

// 房间配置
const publicFacilitiesArr = ref<any>([])
const getPublicFac = async ()=>{
	if(uni.getStorageSync('layoutPublicFacilities')){
		publicFacilitiesArr.value = uni.getStorageSync('layoutPublicFacilities')
	}else{
		let res = await getDictData({
			pageNo: 1,
			pageSize: 30,
			dictType: 'rooms_layout_public_facilities'
		})
		publicFacilitiesArr.value = res.list
		uni.setStorageSync('layoutPublicFacilities',res.list)
	}
}

// 散房详情
const getHouseDetail = async ()=>{
	let data = {
		roomHouseId: roomHouseId.value
	};
	let res = await getRoomHouseInfo(data);
	roomInfo.value = res;
	if(!res.isWhole){
		getOtherRooms()
	}
	let useArr = []
	res.publicFacilities.forEach((e) => {
		const item = publicFacilitiesArr.value.filter((ts) => ts.value == e)
		if (item[0]) {
			useArr.push(item[0])
		}
	})
	roomInfo.value.roomsFacilities = useArr
}

// 其他房间
const otherRooms = ref([])
const getOtherRooms = async ()=>{
	let res = await otherRoomsInTheSameListing({
		roomHouseId: roomHouseId.value
	})
	otherRooms.value = res
}

// 同小区房源
const sameRsdtRooms = ref([])
const getSameResidentialRooms = async ()=>{
	let res = await sameResidentialListings({
		roomHouseId: roomHouseId.value
	})
	sameRsdtRooms.value = res.list
}

// 附近房源
const nearRooms = ref([])
const getNearbyRooms = async ()=>{
	let res = await recommendListingsNear({
		roomHouseId: roomHouseId.value
	})
	nearRooms.value = res
}

// 预约看房
const appointment = ()=>{
	if(uni.getStorageSync('userId')){
		console.log(roomInfo.value)
		uni.navigateTo({
			url:`roomLookApply?roomHouseId=${roomHouseId.value}&apartmentId=${roomInfo.value.apartmentId}`
		});
	}else{
		uni.navigateTo({
			url:`/pages/login/login`
		});
	}
}

// 查看房源
const goHouseDetail = (id)=>{
	uni.navigateTo({
		url:`disperseHouseDetail?roomHouseId=${id}`
	});
}
</script>

<style lang="scss" scoped>
.content{
	padding: 0 0 134rpx;
	.roomInfo{
		background: #fff;
		padding: 28rpx 32rpx 0;
		.infoBox{
			.name{
				font-size: 38rpx;
				font-weight: bold;
				line-height: 48rpx;
				margin: 0 8rpx;
			}
			.num{
				height: 44rpx;
				line-height: 44rpx;
				background: #F5F6F8;
				border-radius: 8rpx;
				color: $uni-color-primary;
				font-size: 20rpx;
				padding: 0 8rpx;
			}
		}
		.areaBox{
			margin-top: 16rpx;
			.area{
				margin-left: 20rpx;
				line-height: 32rpx;
				color: #999;
				.txt{
					color: #333;
				}
			}
			.type{
				line-height: 32rpx;
			}
		}
		.info{
			font-size: 24rpx;
			color: #666;
			line-height: 34rpx;
			margin: 10rpx 0 12rpx;
		}
		.service{
			.tabbox{
				flex: 1;
				.tab{
					display: inline-block;
					line-height: 44rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
					color: #A68868;
					background: #F5F2F0;
					&:last-child{
						margin: 0;
					}
				}
			}
			.price{
				font-size: 24rpx;
				color: #666;
				.yellow{
					font-size: 48rpx;
					font-weight: bold;
					margin-right: 6rpx;
				}
			}
		}
	}
	.address{
		margin: 0 0 16rpx;
		::v-deep.uni-list{
			.uni-list-item__icon{
				margin: 0 10rpx 0 0;
				.uni-list--sm{
					width: 28rpx;
					height: 28rpx;
					margin: 0;
				}
			}
			.uni-list--border-top{
				display: none;
			}
			.uni-list-item__container{
				padding: 10rpx 32rpx 24rpx;
				.uni-list-item__content .uni-list-item__content-title{
					color: #666;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
	.mainBox{
		margin: 0 0 16rpx;
		.mainTit{
			font-weight: bold;
			margin: 0 0 10rpx;
		}
		.installationBox{
			background: #fff;
			padding: 18rpx 32rpx 0;
			.mainTit{
				margin: 0 0 30rpx;
			}
		}
	}
	.checkBox{
		margin: 16rpx 0;
		background: #fff;
		padding: 24rpx 32rpx;
		.tit{
			font-weight: bold;
			color: #000;
		}
		.txt{
			color: #7A7A7A;
			line-height: 38rpx;
			font-size: 26rpx;
		}
	}
	.roomTypeBox{
		background: #fff;
		padding: 18rpx 32rpx 10rpx;
		margin: 0 0 16rpx;
		.mainTit{
			font-weight: bold;
			margin: 0 0 10rpx;
		}
		.typeList{
			.list{
				flex: 0 0 320rpx;
				margin-right: 20rpx;
				.pic{
					width: 320rpx;
					height: 216rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;
					.full{
						position: absolute;
						top: 0;
						left: 0;
						width: 320rpx;
						height: 216rpx;
						background: rgba(0, 0, 0, 0.4);
						color: #fff;
						line-height: 216rpx;
						text-align: center;
					}
				}
				.roomMess{
					flex: 1;
					padding: 20rpx 0 0;
					.name{
						font-size: 28rpx;
						color: #4D4D4D;
						line-height: 34rpx;
						max-width: 320rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.tabbox{
						font-size: 24rpx;
						line-height: 28rpx;
						margin-top: 8rpx;
						.area{
							font-size: 20rpx;
							line-height: 32rpx;
							color: #999;
							max-width: 320rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							.type{
								display: inline;
							}
						}
						.price{
							font-size: 24rpx;
							line-height: 32rpx;
							color: #999;
							margin-top: 8rpx;
							.yellow{
								font-size: 28rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
		.emptyBox{
			padding: 20rpx 0 30rpx;
			.pic{
				width: 162rpx;
				height: 162rpx;
				margin: 0 auto 30rpx;
			}
			.txt{
				text-align: center;
				color: #707070;
				font-size: 24rpx;
			}
		}
	}
	.btnBox{
		background: #fff;
		padding: 20rpx 32rpx 24rpx;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		.phone{
			width: 327rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 30rpx;
			border-radius: 44rpx;
			background: #F7F7F7;
			margin-right: 32rpx;
			&::after{
				display: none;
			}
		}
		.look{
			width: 327rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 30rpx;
			border-radius: 44rpx;
			background: $uni-color-primary;
			color: #fff;
			&::after{
				display: none;
			}
		}
	}
}
</style>
